<template>
  <div class="login_container">

    <div>
      <a href="#/home"><img :src="src_logo" height="" width="" alt=""/></a>

    </div>

    <div class="login_box">

      <div class="login_box_title">
        <h4>
          <a href="javascript:void(0)"
             style="color: #ea6f5a;"
             @mouseenter="showUnderline(1)"
             @mouseleave="hideUnderLine(1)"
             ref="loginRef">
            登录
          </a>
          <span >·</span>
          <a href="javascript:void(0)"
             style="color: #333333;"
             @mouseenter="showUnderline(2)"
             @mouseleave="hideUnderLine(2)"
             ref="signUpRef">注册</a></h4>
      </div>

      <el-form label-width="0px" class="login_form" :model="loginForm" :rules="loginRules" ref="loginFormRef">
        <el-form-item prop="username">
          <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username"></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-lock" v-model="loginForm.password" type="password"></el-input>
        </el-form-item>

        <el-form-item label="" prop="type" class="rememberMe">
          <el-checkbox label="记住我" name="type"></el-checkbox>
          <span class="problem"><a href="javascript:void(0)">登录遇到困难?</a></span>
        </el-form-item>

        <el-form-item class="btn">
          <el-button type="primary" @click="login" round disabled>登陆</el-button>
        </el-form-item>

      </el-form>

      <div class="el-divider-div">
        <el-divider>社交帐号登录</el-divider>
      </div>

      <div class="login_box_icon" >
        <el-row>
          <a href="javascript:void(0)"><i class="social-icon1 el-icon-male"></i></a>
          <a href="javascript:void(0)"><i class="social-icon2 el-icon-female"></i></a>
          <a href="javascript:void(0)"><i class="social-icon3 el-icon-ice-tea"></i></a>
        </el-row>
      </div>

    </div>

  </div>
</template>

<script>
  export default {
    name: "Login",
    data() {
      return {
        src_logo: 'https://murasakichigo.xyz/my-jianshu-simu/assets/img/jianshu_logo.png',
        loginForm: {
          username: 'goudan',
          password: '111111',
          rememberMe: true,
        },
        loginRules: {
          username: [
            {required: true,message: '需要用户名',trigger: blur}, //参数解释:必选,提示信息,当失去焦点时触发
            {min: 6,max: 10,message: '长度在 6 到 10 个字符',trigger: 'blur'}  //最小,最大,提示信息,当失焦
          ],
          password: [
            {required: true,message: '需要密码',trigger: blur},
            {min: 6,max: 10,message: '长度在 6 到 10 个字符',trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      login() {
        this.$refs.loginFormRef.validate( async valid => {
          // console.log(valid); //true/false,判断条件依据 ↑的loginRules决定,满足则true
          if (!valid) {
            return;   //不满足则直接返回
          }

          let {data: result} = await this.axios.post('login',this.loginForm);

          if (result.meta.status !== 200) {

            this.$message.error('登陆失败！')

          }else {
            this.$message.success('登陆成功！');
            window.sessionStorage.setItem('token',result.data.token);
            this.$router.push('/home');
          }
        })
      },
      showUnderline(type) {
        if (type === 1) {
          this.$refs.loginRef.style['border-bottom'] = '1px solid #ea6f5a'
        }else {
          this.$refs.signUpRef.style['border-bottom'] = '1px solid #ea6f5a'
        }


      },
      hideUnderLine(type) {
        if (type === 1) {
          this.$refs.loginRef.style['border-bottom'] = '0px solid #ea6f5a'
        }else {
          this.$refs.signUpRef.style['border-bottom'] = '0px solid #ea6f5a'
        }
      },

    },
    created() {
    },

  }
</script>

<style scoped lang="less">
  .login_container {
    background-color: #f1f1f1;
    height: 100%;
  }

  .login_box {
    background-color: #ffffff;

    width: 400px;
    height: 565px;
    border-radius: 2%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 10px #d1d1d1;

  }


  .login_box_title{
    margin-top: 50px;
    text-align:center;
    a {
      font-weight: 700;


      text-decoration:none;

      padding-bottom:5px;
      border-bottom:0 solid #ea6f5a;
    }
    h4 {
      font-size: 20px;
    }
    span {
      margin: 0 20px;
    }
  }

  .login_form {
    margin-top: 20px;
    position: absolute;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .btn {
    position: absolute;
    margin-top: 20px;
    left: 50%;
    transform: translate(-50%,-50%);
    .el-button {
      background: #3194d0;
      font-size: 18px;
      width: 300px;
    }
  }

  .el-divider-div {
    left: 10%;

    position: absolute;
    width: 80%;
    margin-top: 250px;
    .el-divider__text {
      color: #b5b5b5;
      font-size: 12px;
    }
  }
  .login_box_icon {
    position: absolute;
    left: 26%;
    top: 68%;
    width: 350px;

    i {
      font-size: 35px;
      margin: 0 15px;
    }

    .social-icon1{
      color: #95ceee;

    }
    .social-icon2{
      color: #ee99e6;
    }
    .social-icon3{
      color: #e9ee9a;
    }
  }

  .problem {
    margin-left: 200px;
  }

  .rememberMe{
    color: #969696;
    font-size: 14px;
    margin-top: -10px;
    margin-bottom: 5px;
    a {
      text-decoration:none;
      color: #969696;

    }
  }

</style>